<!-- 直接在这里引用MyDjango.html文件 -->
{% extends 'mydjango.html' %}
<!-- 声明静态资源位置 -->
{% load static %}
<!-- 重写content接口内容,写在两个django内置语法标签之间 -->
{% block content %}
    <!-- 广告轮播样式，以单张图片为主 -->
    <div class="Category-con">
        <div class="Category-banner">
            <div class="w1200">
                <img src="{% static 'img/banner1.jpg' %}" alt="图片加载失败">
            </div>
        </div>
    </div>

    <!-- 添加商品今日必选样式 -->
    <div class="floors">
        <div class="sk">
            <div class="sk_inner w1200">
                <!-- 添加左边图片log -->
                <div class="sk_hd">
                    <a href="javascript:;">
                        <img src="{% static 'img/s_img1.jpg' %}" alt="图片加载失败">
                    </a>
                </div>
                <!--  -->
                <div class="sk_bd">
                    <div class="layui-carousel" id="test1">
                        <div carousel-item>
                            <div class="item-box">
                                <!-- 循环模型中commodityinfos中的数据（销量最高的8条数据） -->
                                {% for c in commodityinfos %}
                                    <!-- forloop.counter内置语法表示当前的循环次数 -->
                                    {% if forloop.counter < 5 %}
                                    <div class="item">
                                        <a href="{% url 'commodity:detail' c.id %}"></a>
                                        <img src="{{ c.img.url }}" alt="图片加载失败">
                                        <div class="title">
                                            {{ c.name }}
                                        </div>
                                        <div class="price">
                                            <!-- floatformat过滤器对数值格式化输出，保留两位小数 -->
                                            <span>￥{{ c.discount|floatformat:2 }}</span>
                                            <span>￥{{ c.price|floatformat:2 }}</span>
                                        </div>
                                    </div>
                                    {% endif %}
                            {% endfor %}
                            </div>

                            <div class="item-box">
                                <!-- 循环模型中commodityinfos中的数据（销量最高的8条数据） -->
                                {% for c in commodityinfos %}
                                    <!-- forloop.counter内置语法表示当前的循环次数 -->
                                    {% if forloop.counter < 5 %}
                                    <div class="item">
                                        <a href="{% url 'commodity:detail' c.id %}"></a>
                                        <img src="{{ c.img.url }}" alt="图片加载失败">
                                        <div class="title">
                                            {{ c.name }}
                                        </div>
                                        <div class="price">
                                            <!-- floatformat过滤器对数值格式化输出，保留两位小数 -->
                                            <span>￥{{ c.discount|floatformat:2 }}</span>
                                            <del>￥{{ c.price|floatformat:2 }}</del>
                                        </div>
                                    </div>
                                    {% endif %}
                            {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 实现某分类的商品热销展示，分别为服饰，食品，用品三个模块，每个模块展示5条商品数据 -->
    <div class="product-cont w1200" id="product-comt">
        <!-- 一楼展示 -->
        <div class="product-item product-item layui-clear">
            <!-- 标题内容 -->
            <div class="left-title">
                <h4>
                    <i>
                        1F
                    </i>
                </h4>
                <img src="{% static 'img/icon_gou.png' %}" alt="图片加载失败">
                <h5>
                    服饰
                </h5>
            </div>
            <div class="right-cont">
                <a href="javascript:;" class="top-img">
                    <img src="{% static 'img/img12.jpg' %}" alt="图片加载失败">
                </a>
                <div class="img-box">
                    {% for c in clothes %}
                    <a href="{% url 'commodity:detail' c.id %}">
                        <img src="{{ c.img.url }}" alt="图片加载失败">
                    </a>
                    {% endfor %}
                </div>
            </div>
        </div>

        <!-- 二楼展示 -->
        <div class="product-item product-item2 layui-clear">
            <!-- 标题内容 -->
            <div class="left-title">
                <h4>
                    <i>
                        2F
                    </i>
                </h4>
                <img src="{% static 'img/icon_gou.png' %}" alt="图片加载失败">
                <h5>
                    食品
                </h5>
            </div>
            <div class="right-cont">
                <a href="javascript:;" class="top-img">
                    <img src="{% static 'img/img12.jpg' %}" alt="图片加载失败">
                </a>
                <div class="img-box">
                    {% for f in food %}
                    <a href="{% url 'commodity:detail' f.id %}">
                        <img src="{{ f.img.url }}" alt="图片加载失败">
                    </a>
                    {% endfor %}
                </div>
            </div>
        </div>

        <!-- 3楼展示 -->
        <div class="product-item product-item3 layui-clear">
            <!-- 标题内容 -->
            <div class="left-title">
                <h4>
                    <i>
                        3F
                    </i>
                </h4>
                <img src="{% static 'img/icon_gou.png' %}" alt="图片加载失败">
                <h5>
                    用品
                </h5>
            </div>
            <div class="right-cont">
                <a href="javascript:;" class="top-img">
                    <img src="{% static 'img/img12.jpg' %}" alt="图片加载失败">
                </a>
                <div class="img-box">
                    {% for g in goods %}
                    <a href="{% url 'commodity:detail' g.id %}">
                        <img src="{{ g.img.url }}" alt="图片加载失败">
                    </a>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
{% endblock content %}

<!-- 网页底部接口页面展示 -->
{% block footer %}
    <div class="footer">
        <div class="ng-promise-box">
            <div class="ng-promise w1200">
                <p class="text">
                    <a class="icon1" href="javascript:;">7天无理由退换货</a>
                    <a class="icon2" href="javascript:;">满99天全场免邮</a>
                    <a class="icon3" style="margin-right: 0" href="javascript:;">100%品质保证</a>
                </p>
            </div>
        </div>
        <div class="mod_help w1200">
            <p>
                <a href="javascript:;">关于我们</a>
                <span>|</span>
                <a href="javascript:;">帮助中心</a>
                <span>|</span>
                <a href="javascript:;">售后服务</a>
                <span>|</span>
                <a href="javascript:;">母婴咨询</a>
                <span>|</span>
                <a href="javascript:;">关于货源</a>
            </p>
        </div>
    </div>
{% endblock footer %}

<!-- 编写js代码接口 -->
{% block script %}
    layui.config({
        base: '../pstatic/js/'
      }).use(['mm','carousel'],function(){
          var carousel = layui.carousel,
         mm = layui.mm;
         var option = {
            elem: '#test1'
            ,width: '100%'
            ,arrow: 'always'
            ,height:'298'
            ,indicator:'none'
          }
          carousel.render(option);
    });

{% endblock script %}